<template>
  <section class="my-wrap">
    <div class="my-tab">
      <ul class="my-tab-title">
        <li>
          <nuxt-link :to="'/my/4'" :class="this.$store.state.myRouteParam == 'myindex' ? 'tab-active' :'' "
                     active-class="tab-active">提问
          </nuxt-link>
        </li>
        <li>
          <nuxt-link :to="'/my/5'" active-class="tab-active">回答</nuxt-link>
        </li>
        <li>
          <nuxt-link :to="'/my/6'" active-class="tab-active">文章</nuxt-link>
        </li>
        <li>
          <nuxt-link :to="'/my/7'" active-class="tab-active">收藏</nuxt-link>
        </li>
        <li>
          <nuxt-link :to="'/my/8'" active-class="tab-active">草稿</nuxt-link>
        </li>
        <li class="my-tab-menu">
          <span>更多</span>
          <div>
            <ul>
              <li>
                <nuxt-link :to="'/my/1'" active-class="tab-menu-active">资料</nuxt-link>
              </li>
              <li>
                <nuxt-link :to="'/my/2'" active-class="tab-menu-active">粉丝</nuxt-link>
              </li>
              <li>
                <nuxt-link :to="'/my/3'" active-class="tab-menu-active">关注</nuxt-link>
              </li>
            </ul>
          </div>
        </li>
      </ul>

      <!--mobile-->
      <ul class="my-m-tab-title">
        <li @click="showContentModal('我的资料')">
          <nuxt-link class="m-tab-item" :to="'/my/1'"><span>资料</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li @click="showContentModal('我的粉丝')">
          <nuxt-link class="m-tab-item" :to="'/my/2'"><span>粉丝</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li @click="showContentModal('我的关注')">
          <nuxt-link class="m-tab-item" :to="'/my/3'"><span>关注</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li class="m-tab-item-split"></li>
        <li @click="showContentModal('我的提问')">
          <nuxt-link class="m-tab-item" :to="'/my/4'"><span>提问</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li @click="showContentModal('我的回答')">
          <nuxt-link class="m-tab-item" :to="'/my/5'"><span>回答</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li @click="showContentModal('我的文章')">
          <nuxt-link class="m-tab-item" :to="'/my/6'"><span>文章</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li @click="showContentModal('我的收藏')">
          <nuxt-link class="m-tab-item" :to="'/my/7'"><span>收藏</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
        <li @click="showContentModal('我的草稿')">
          <nuxt-link class="m-tab-item" :to="'/my/8'"><span>草稿</span><img class="fr"
                                                                          src="/icons/right.png"/><span
            class="cf"></span></nuxt-link>
        </li>
      </ul>


      <div class="my-tab-content">
        <nuxt-child></nuxt-child>
      </div>
      <div v-if="this.$store.state.contentModal" class="my-m-tab-content">
        <div class="m-tab-content-nav">
          <img @click="hideContentModal" src="/icons/detail-m-return.png"/>
          <span class="">{{modalNavTitle}}</span>
        </div>
        <nuxt-child class="m-tab-content-nuxt"></nuxt-child>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    layout: 'my',
    data () {
      return {
        modalNavTitle: '我的'
      }
    },
    mounted () {
    },
    components: {},
    methods: {
      showContentModal (title) {
        this.$store.dispatch('setContentModal', {
          contentModal: true
        })
        this.modalNavTitle = title
      },
      hideContentModal () {
        this.$store.dispatch('setContentModal', {
          contentModal: false
        })
      }
    }
  }
</script>
<style>
  .my-tab-menu > div {
    display: none;
    position: absolute;
    min-width: 16.6%;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.27);
    border: 1px solid #f3f3f3;
    background-color: #ffffff;
  }

  .my-tab-menu:hover > div {
    display: block;
  }

  .my-tab-menu li:hover {
    color: #13BA31;
  }

  .m-tab-content-nav {
    height: 40px;
    line-height: 40px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
  }

  .m-tab-content-nuxt {
    margin-top: 40px;
  }

  .m-tab-content-nav img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .m-tab-content-nav span {
    vertical-align: middle;
    margin-left: 10px;
  }

  .my-m-tab-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow-y: auto;
  }

  .my-m-tab-title, .my-m-tab-content {
    background-color: #ffffff;
    display: none;
    font-size: 1.25em;
  }

  .my-m-tab-title .m-tab-item {
    width: 100%;
  }

  .my-m-tab-title > li {
    border-bottom: 1px solid #ececec;
    height: 40px;
    line-height: 40px;
    padding-left: 1%;
  }

  .m-tab-item-split {
    height: 5px !important;
    background-color: #f3f3f3;
  }

  .my-m-tab-title > li img {
    width: 20px;
    height: 20px;
    margin-top: 10px;
  }

  .tab-active {
    color: #13BA31;
    border-bottom: 2px solid #13BA31;
  }

  .tab-menu-active {
    color: #13BA31;
  }

  .my-tab-content {
    padding-top: 10px;
    width: 98%;
    padding-right: 1%;
    padding-left: 1%;
    display: block;
  }

  .my-tab-title {
    width: 100%;
    margin-top: 5px;
    border-bottom: 1px solid #ececec;
    display: block;
  }

  .my-tab-title > li {
    width: 16.6%;
    text-align: center;
    display: inline-block;
    font-size: 1.3em;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
  }

  /* 手机或小平板 phone */
  @media all and (max-width: 766px) {
    .my-tab-title, .my-tab-content {
      display: none;
    }

    .my-m-tab-title, .my-m-tab-content {
      display: block;
    }
  }
</style>
